import React, { useState, useEffect } from 'react';
import { Button, List, InputItem, NavBar, Icon, Modal, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';

import {
    GetPictCode,
    getForgetPassword,
    postFindPwd,
} from "@/api/login.js"; //

import { R } from "@/assets/js/dict";

import './forgetPassword.scss';

const alert = Modal.alert;

function ForgetPassword (props) {
    const [imgObject, SetImgObject] = useState({});
    let [btn, setBtn] = useState("发送");
    let [couldSend, updateSend] = useState(true);
    const [submitDisable, setSubmitDisable] = useState(true);


    // 获取图形验证码
    function axiosGetPictCode () {
        GetPictCode().then(res => {
            if (R.isSuccess(res)) {
                SetImgObject(res.responseData)
            }
        })
    }

    // 发送手机验证码  Api
    function axiosGetForgetPassword (params) {
        getForgetPassword(params).then(res => {
            console.log('res ---->>>', res);
            if (res.code == '888168') {
                axiosGetPictCode();
            } else if (res.code == '000000') {
                alert(res.message)
                setSubmitDisable(false)
                let count = 60;
                setBtn(`发送(${count})`);

                //设置短信发送按键为不可以点击
                updateSend(false);
                let c = setInterval(() => {
                    count--;
                    if (count === 0) {
                        clearInterval(c);
                        setBtn("发送");
                        //设置短信发送按键为可以点击
                        updateSend(true);
                    } else {
                        setBtn(`发送(${count})`);
                        //设置短信发送按键为不可以点击
                        updateSend(false);
                    }
                }, 1000);
            }
        })
    }


    //  忘记密码 Api
    function axiosPostFindPwd (params) {
        postFindPwd(params).then(res => {
            console.log('res ---->>>', res);
            if (res.code == '000000') {
                alert('提示', res.message, [
                    { text: '确定', onPress: () => props.history.goBack() },
                ])
            }
        })
    }

    // 提交表单
    let onSubmit = () => {
        props.form.validateFields({ force: true }, (error) => {
            if (!error) {
                let postData = props.form.getFieldsValue();
                postData.role = sessionStorage.getItem('roleVal');
                postData.phone = postData.phone.replace(/\s+/g, "");
                axiosPostFindPwd(postData)
            }
        });
    };

    // 重置
    let onReset = () => {
        props.form.resetFields();
    }

    // 发送验证码
    let handleGetPhoneCodeForSignIn = () => {
        let postData = {};
        postData.role = sessionStorage.getItem('roleVal');
        postData.flag = imgObject.key;

        let pict_code = props.form.getFieldsValue().pict_code;
        if (!!pict_code) {
            postData.pict_code = pict_code;
        } else {
            Toast.info("请填写图形验证码", 1);
            return;
        }

        let phone = props.form.getFieldsValue().phone;
        console.log("phone---> ", phone);
        if (phone) {
            postData.phone = phone.replace(/\s+/g, "");
        } else {
            Toast.info("请填写手机号码", 1);
            return;
        }

        console.log('postData ---->>>', postData)
        axiosGetForgetPassword(postData)


    }
    useEffect(() => {
        axiosGetPictCode();
    }, []);

    const { getFieldProps, getFieldError } = props.form;

    return (
        <div className="forgetPassword">
            <div className="page-title">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => {
                        props.history.goBack()
                    }}
                >
                    找回密码
                </NavBar>
            </div>
            <div className="page-content">
                <form>
                    <List>
                        <List.Item>
                            图形验证码
                            <img style={{
                                width: '90px',
                                height: 'auto',
                                float: 'right',
                                marginLeft: '10px'
                            }} src={'data:image/png;base64,' + imgObject.img} onClick={() => {
                                axiosGetPictCode()
                            }} />

                            <input placeholder="请输入"{...getFieldProps('pict_code', { initialValue: '' })} />
                        </List.Item>

                        <InputItem placeholder="请输入手机号码"
                            type="phone"
                            {...getFieldProps('phone', { initialValue: '' })}
                        >手机号码</InputItem> 

                        <List.Item
                            className="phone-list-item"
                            extra={<Button type="primary"
                                size="small" inline disabled={!couldSend} onClick={() => {
                                    handleGetPhoneCodeForSignIn()
                                }}>
                                {btn}
                            </Button>}
                            multipleLine
                        >
                            短信验证码
                            <input
                                placeholder="请输入" {...getFieldProps('code', { initialValue: '' })} />
                        </List.Item>

                        <List.Item>
                            <div className="forget-password-submit">
                                <Button type="primary" size="small" inline onClick={onSubmit} disabled={submitDisable}>提交</Button>
                                <Button size="small" inline style={{ marginLeft: '2.5px' }} onClick={onReset}>重置</Button>
                            </div>
                        </List.Item>
                    </List>
                </form>
            </div>
        </div>
    );
}

const forgetPassword = createForm()(ForgetPassword);
export default forgetPassword;